<html>
<head>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="/js/page.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台首页</title></head>
<link type="text/css" rel="stylesheet" href="/css/style.css">
<body>
<center>
    <div>
        <table class="table table-bordered table-dark" id="searchResult" border="0" cellpadding="0" cellspacing="0" width="650" height="300">
            <thead>
            <!--<tr align="center" height="30" bgcolor="#F0F0F0">
                <td width="6%"><b>序号</b></td>
                <td width="11%"><b>信息类别</b></td>
                <td width="8%"><b>ID值</b></td>
                <td width="38%"><b>信息标题</b></td>
                <td width="22%"><b>发布时间</b></td>
                <td width="15%"><b>联系人</b></td>
            </tr>-->
            </thead>
            <tbody>
            </tbody>

        </table>
        <!--显示分页的信息-->
        <div class="row">
            <!--分页文字信息-->
            <div class="col-md-4" align="left" id="page_info_area">
            </div>
            <!--分页条信息-->
            <div class="col-md-8" align="right" id="page_nav_area">
            </div>
        </div>
    </div>

</center>
</body>
<script>

    window.onload = function () {
        getUsersNotAdmin(1);
    };

    // 为审核设置按钮添加事件
    $(document).on("click",".check_btn",function () {
        var info_id = $(this).attr("check-id");
        $.ajax({
            url:"/info/check",
            type:"post",
            data:{
                id:info_id
            },
            success:function (result) {
                alert(result.msg);
            }
        })
    });

    // 为支付设置按钮添加事件
    $(document).on("click",".pay_btn",function () {
        var info_id = $(this).attr("pay-id");
        $.ajax({
            url:"/info/pay",
            type:"post",
            data:{
                id:info_id
            },
            success:function (result) {
                alert(result.msg);
            }
        })
    });

    // 根据ID查询需要设置的信息
    function selectNotCheckPay() {
        $("#page_info_area").empty();
        $("#page_nav_area").empty();
        var check_pay_id = window.localStorage.getItem("check_pay_id");
        $.ajax({
            url:'/info/sel',
            type:'post',
            data:{
                id:check_pay_id
            },
            success:function (result) {
                build_result_select_info(result);
            }
        })
    }

    // 构建显示根据ID查询到的信息
    function build_result_select_info(result) {
        $("#searchResult thead").empty();
        $("#searchResult tbody").empty();
        var info = result.extend.info;
        var content = $("<b></b>").append('■查询详细信息').addClass("color=\"#004790\"");
        var title = $("<td></td>").append(content);
        var checkBtn = $("<button></button>").addClass("btn btn-success btn-sm check_btn")
            .append($("<span></span>").addClass("glyphicon glyphicon-pencil").append("审核通过"));
        //为编辑按钮添加一个自定义的属性，来表示当前用户id
        checkBtn.attr("check-id", info.id);
        var payBtn = $("<button></button>").addClass("btn btn-primary btn-sm pay_btn")
            .append($("<span></span>").addClass("glyphicon glyphicon-pencil").append("设置付费"));
        //为编辑按钮添加一个自定义的属性，来表示当前用户id
        payBtn.attr("pay-id", info.id);
        $("<tr></tr>").append(title)
            .append(checkBtn).append(" | ").append(payBtn)
            .appendTo("#searchResult thead");

        var c_c_1 = $("<td></td>").append('信息类别');
        var c_c_2 = $("<td></td>").append(info.type.typeName);
        $("<tr></tr>").append(c_c_1)
            .append(c_c_2)
            .appendTo("#searchResult tbody");

        var c_c_3 = $("<td></td>").append('发布时间');
        var c_c_4 = $("<td></td>").append(info.infoDate);
        $("<tr></tr>").append(c_c_3)
            .append(c_c_4)
            .appendTo("#searchResult tbody");

        var c_c_5 = $("<td></td>").append('信息标题');
        var c_c_6 = $("<td></td>").append(info.infoTitle);
        $("<tr></tr>").append(c_c_5)
            .append(c_c_6)
            .appendTo("#searchResult tbody");

        var c_c_7 = $("<td></td>").append('信息内容');
        var c_c_8 = $("<td></td>").append(info.infoContent);
        $("<tr></tr>").append(c_c_7)
            .append(c_c_8)
            .appendTo("#searchResult tbody");

        var c_c_9 = $("<td></td>").append('联系电话');
        var c_c_11 = $("<td></td>").append(info.infoPhone);
        $("<tr></tr>").append(c_c_9)
            .append(c_c_11)
            .appendTo("#searchResult tbody");

        var c_c_12 = $("<td></td>").append('联系人');
        var c_c_13 = $("<td></td>").append(info.infoLinkman);
        $("<tr></tr>").append(c_c_12)
            .append(c_c_13)
            .appendTo("#searchResult tbody");

        var c_c_14 = $("<td></td>").append('E-mail');
        var c_c_15 = $("<td></td>").append(info.infoEmail);
        $("<tr></tr>").append(c_c_14)
            .append(c_c_15)
            .appendTo("#searchResult tbody");
    }

    //给更新按钮添加点击绑定事件
    $(document).on("click",".update_btn",function () {
        var user_id = $(this).attr("update-id");
        var user_name = document.getElementById("name_input").value;
        var user_pwd = document.getElementById("pwd_input").value;
        $.ajax({
            url:"/user/update",
            type:"post",
            data:{
                id:user_id,
                userName:user_name,
                userPassword:user_pwd
            },
            success:function (result) {
                alert(result.msg);
                getUsersNotAdmin(1);
            }
        })
    });

    //给按钮添加点击绑定事件
    $(document).on("click",".edit_btn",function () {
        // alert("edit");
        var user_id = $(this).attr("edit-id");
        $.ajax({
            url:"/user/id",
            type:"post",
            data:{
                id:user_id
            },
            success:function (result) {
                build_result_select_user_edit(result);
            }
        })
    });

    // 构建用户信息编辑显示
    function build_result_select_user_edit(result) {
        var user = result.extend.user;
        $("#searchResult thead").empty();
        $("#searchResult tbody").empty();
        var user_id = $("<td></td>").append('用户ID');
        var user_id_input = $("<td></td>").append(user.id);
        var user_name = $("<td></td>").append('用户名');
        var name_input = $("<input/>").val(user.userName);
        name_input.attr('id', 'name_input');
        var user_name_input = $("<td></td>").append(name_input);
        var user_pwd = $("<td></td>").append('用户密码');
        var pwd_input = $("<input/>");
        pwd_input.attr('type', 'password');
        pwd_input.attr('id', 'pwd_input');
        pwd_input.val('');
        var user_pwd_input = $("<td></td>").append($(pwd_input));
        var updateBtn = $("<button></button>").addClass("btn btn-success btn-sm update_btn")
            .append($("<span></span>").addClass("glyphicon glyphicon-pencil").append("Update"));
        //为编辑按钮添加一个自定义的属性，来表示当前用户id
        updateBtn.attr("update-id", user.id);
        $("<tr></tr>").append(user_id)
            .append(user_id_input)
            .appendTo("#searchResult thead");
        $("<tr></tr>").append(user_name)
            .append(user_name_input)
            .appendTo("#searchResult tbody");
        $("<tr></tr>").append(user_pwd)
            .append(user_pwd_input)
            .appendTo("#searchResult tbody");
        $("<tr></tr>").append(updateBtn)
            .appendTo("#searchResult tbody");
    }

    // 删除用户添加事件
    $(document).on("click", ".delete_btn", function () {
        //弹出是否确认删除对话框
        // alert($(this).parents("tr").find("td:eq(1)").text());
        var user_name = $(this).parents("tr").find("td:eq(1)").text();
        var user_id = $(this).attr("del-id");
        if (confirm("确认删除【" + user_name + "】吗？")) {
            //确认，发送ajax请求到后台删除即可
            $.ajax({
                url: "/user/del",
                type: "POST",
                data:{
                    id:user_id
                },
                success: function (result) {
                    alert(result.msg);
                    // 删除完成回到原来的界面
                    getUsersNotAdmin(1);
                }
            });
        }
    });

    // 根据用户ID查询用户信息
    function getUserByUserId() {
        $("#page_info_area").empty();
        $("#page_nav_area").empty();
        var select_user_id = window.localStorage.getItem("select_user_id");
        $.ajax({
            url:"/user/id",
            type:"post",
            data:{
                id:select_user_id
            },
            success:function (result) {
                build_result_select_user(result);
            }
        })
    }

    // 构建根据ID查询的用户信息的显示
    function build_result_select_user(result) {
        var user = result.extend.user;
        $("#searchResult thead").empty();
        $("#searchResult tbody").empty();
        console.log(user);
        var user_id = $("<td></td>").append('用户ID');
        var user_name = $("<td></td>").append('用户名');
        var option = $("<td></td>").append('操作');
        $("<tr></tr>").append(user_id)
            .append(user_name)
            .append(option)
            .appendTo("#searchResult thead");
        var user_id_1 = $("<td></td>").append(user.id);
        var user_name_1 = $("<td></td>").append(user.userName);
        // 按钮
        var editBtn = $("<button></button>").addClass("btn btn-success btn-sm edit_btn")
            .append($("<span></span>").addClass("glyphicon glyphicon-pencil").append("Edit"));
        //为编辑按钮添加一个自定义的属性，来表示当前用户id
        editBtn.attr("edit-id", user.id);
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
            .append($("<span></span>").addClass("glyphicon glyphicon-trash").append("Delete"));
        delBtn.attr("del-id", user.id);
        var btnTd = $("<td></td>").append(editBtn).append(" | ").append(delBtn);
        $("<tr></tr>").append(user_id_1)
            .append(user_name_1)
            .append(btnTd)
            .appendTo("#searchResult tbody");
    }

    // 获取非管理员用户信息
    function getUsersNotAdmin(pN) {
        var pageSize = 5;
        $.ajax({
            url:"/user/select",
            type:"post",
            data:{
                pageNum:pN,
                pageSize:pageSize
            },
            success:function (result) {
                build_result_user(result);
                build_page_info(result);
                build_page_nav_user(result);
            }
        })
    }

    // 解析并显示分页条信息
    function build_page_nav_user(result) {
        // $("#page_nav_area")
        //清空数据
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        //构建元素
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if (result.extend.page.hasPreviousPage == false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else {
            //为元素添加点击翻页事件
            firstPageLi.click(function () {
                getUsersNotAdmin(1);
            });
            prePageLi.click(function () {
                getUsersNotAdmin(result.extend.page.pageNum-1);
            });
        }
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
        if (result.extend.page.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else {
            //为元素添加点击翻页事件
            nextPageLi.click(function () {
                getUsersNotAdmin(result.extend.page.pageNum+1);
            });
            lastPageLi.click(function () {
                getUsersNotAdmin(result.extend.page.pages);
            });
        }
        //构造首页和前一页提示按钮
        ul.append(firstPageLi).append(prePageLi);
        $.each(result.extend.page.navigatepageNums,function (index,item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if (result.extend.page.pageNum == item) {
                numLi.addClass("active");
            }
            numLi.click(function () {
                getUsersNotAdmin(item);
            });
            ul.append(numLi);
        });
        ul.append(nextPageLi).append(lastPageLi);
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    // DOM构建显示用户信息
    function build_result_user(result) {
        $("#searchResult thead").empty();
        $("#searchResult tbody").empty();
        var users = result.extend.page.list;
        console.log(users);
        var user_id = $("<td></td>").append('用户ID');
        var user_name = $("<td></td>").append('用户名');
        var option = $("<td></td>").append('操作');
        $("<tr></tr>").append(user_id)
            .append(user_name)
            .append(option)
            .appendTo("#searchResult thead");
        $.each(users, function (index, item) {
            var user_id_1 = $("<td></td>").append(item.id);
            var user_name_1 = $("<td></td>").append(item.userName);
            // 按钮
            var editBtn = $("<button></button>").addClass("btn btn-success btn-sm edit_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil").append("Edit"));
            //为编辑按钮添加一个自定义的属性，来表示当前用户id
            editBtn.attr("edit-id", item.id);
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash").append("Delete"));
            delBtn.attr("del-id", item.id);
            var btnTd = $("<td></td>").append(editBtn).append(" | ").append(delBtn);

            $("<tr></tr>").append(user_id_1)
                .append(user_name_1)
                .append(btnTd)
                .appendTo("#searchResult tbody");
        });
    }

    // 根据多条件查询信息
    function getInfo(pN) {
        var pay = window.localStorage.getItem("m_pay");
        var check = window.localStorage.getItem("m_check");
        var type = window.localStorage.getItem("m_type");
        var pageSize = 5;
        $.ajax({
            url:"/info/select",
            type:"post",
            data:{
                pageNum:pN,
                pageSize:pageSize,
                infoPayfor:pay,
                infoCheck:check,
                infoType:type
            },
            success:function (result) {
                build_result(result);
                build_page_info(result);
                build_page_nav_info(result);
            }
        })
    }

    // 解析并显示分页条信息
    function build_page_nav_info(result) {
        // $("#page_nav_area")
        //清空数据
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        //构建元素
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if (result.extend.page.hasPreviousPage == false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else {
            //为元素添加点击翻页事件
            firstPageLi.click(function () {
                getInfo(1);
            });
            prePageLi.click(function () {
                getInfo(result.extend.page.pageNum-1);
            });
        }
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
        if (result.extend.page.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else {
            //为元素添加点击翻页事件
            nextPageLi.click(function () {
                getInfo(result.extend.page.pageNum+1);
            });
            lastPageLi.click(function () {
                getInfo(result.extend.page.pages);
            });
        }
        //构造首页和前一页提示按钮
        ul.append(firstPageLi).append(prePageLi);
        $.each(result.extend.page.navigatepageNums,function (index,item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if (result.extend.page.pageNum == item) {
                numLi.addClass("active");
            }
            numLi.click(function () {
                getInfo(item);
            });
            ul.append(numLi);
        });
        ul.append(nextPageLi).append(lastPageLi);
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    // 解析并显示结果集
    function build_result(result) {
        $("#searchResult thead").empty();
        $("#searchResult tbody").empty();
        var infos = result.extend.page.list;
        console.log(infos);
        var id_1 = $("<td></td>").append('序号');
        var infoType_1 = $("<td></td>").append('信息类别');
        var infoId_1 = $("<td></td>").append('ID值');
        var infoTitle_1 = $("<td></td>").append('信息标题');
        var infoDate_1 = $("<td></td>").append('发布时间');
        var infoLinkman_1 = $("<td></td>").append('联系人');
        $("<tr></tr>").append(id_1)
            .append(infoType_1)
            .append(infoId_1)
            .append(infoTitle_1)
            .append(infoDate_1)
            .append(infoLinkman_1)
            .appendTo("#searchResult thead");
        $.each(infos, function (index, item) {
            var id = $("<td></td>").append(index + 1);
            var infoType = $("<td></td>").append(item.type.typeName);
            var infoId = $("<td></td>").append(item.id);
            var infoTitle = $("<td></td>").append(item.infoTitle);
            var infoDate = $("<td></td>").append(item.infoDate);
            var infoLinkman = $("<td></td>").append(item.infoLinkman);
            $("<tr></tr>").append(id)
                .append(infoType)
                .append(infoId)
                .append(infoTitle)
                .append(infoDate)
                .append(infoLinkman)
                .appendTo("#searchResult tbody");
        });
    }
</script>
</html>